<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
  },
});
</script>

<template>
  <view class="date-item">
    <view
      class="date-item-week"
      :style="{ color: info.status === 0 ? '#999999' : '#2d2d2d' }"
    >
      {{ info.week_str }} {{ info.date_str }}
    </view>
    <view
      class="date-item-text"
      v-if="info.status === 0"
      style="color: #999999"
    >
      不可约
    </view>
    <view class="date-item-price" v-else-if="info.status === 1">
      <text class="date-item-price2">¥</text>{{ info.price
      }}<text class="date-item-price3">起</text>
    </view>
    <view
      class="date-item-text"
      v-else
      style="color: #ee5734; font-weight: bold"
    >
      {{ info.status === 2 ? "余位紧张" : "已约满" }}
    </view>
  </view>
</template>

<style lang="scss">
.date-item {
  padding-top: 10rpx;
  padding-bottom: 4rpx;

  .date-item-week {
    font-size: 24rpx;
    line-height: 34rpx;
    text-align: center;
  }

  .date-item-price {
    font-size: 28rpx;
    color: #ee5734;
    line-height: 40rpx;
    text-align: center;
    font-weight: bold;
  }

  .date-item-price2,
  .date-item-price3 {
    font-size: 22rpx;
    line-height: 40rpx;
    font-weight: 400;
  }

  .date-item-price3 {
    margin-left: 4rpx;
    color: #2d2d2d;
  }

  .date-item-text {
    font-size: 24rpx;
    line-height: 40rpx;
    text-align: center;
  }
}
</style>
